<template>
    <v-group
        ref="groupRef"
        v-for="(paragraphInfo, paragraphIndex) in configList"
        @click="emits('click', $event, paragraphInfo)"
    >
        <!-- 高亮区域 -->
        <v-group
            :config="{
                opacity: paragraphInfo.isHighlight ? 1 : 0,
            }"
        >
            <v-rect
                v-for="cooridate in paragraphInfo.cooridates"
                :config="{
                    x: cooridate.x,
                    y: cooridate.y,
                    width: cooridate.width,
                    height: cooridate.height,
                    fill: 'rgba(0,0,0,1)',
                    globalCompositeOperation: 'destination-out',
                }"
            ></v-rect>
        </v-group>
        <!-- 序号 -->
        <v-group
            :config="
                calNumberMarkPos(
                    paragraphInfo.cooridates[0],
                    defaultNumberMarkConfig.circle
                )
            "
        >
            <v-circle :config="defaultNumberMarkConfig.circle"></v-circle>
            <v-text
                :config="{
                    ...defaultNumberMarkConfig.text,
                    text: `${paragraphIndex + 1}`,
                }"
            ></v-text>
        </v-group>
        <!-- 下划线 -->
        <v-group>
            <v-line
                v-for="cooridate in paragraphInfo.cooridates"
                :config="createUnderLineConfig(cooridate)"
            ></v-line>
        </v-group>
    </v-group>
</template>
<script setup lang="ts">
import { calNumberMarkPos } from "@/components/origin-js";
import { onMounted, ref } from "vue";

const props = defineProps<{
    configList: AnyObject[];
    defaultNumberMarkConfig: AnyObject;
}>();
const emits = defineEmits(["click"]);

const groupRef = ref(null);
onMounted(() => {
    groupRef.value?.forEach((gRef, gIndex) => {
        gRef.getNode().on("tap", (e) => {
            emits("click", e, props.configList[gIndex]);
        });
    });
});

const createUnderLineConfig = (cooridates: { [key: string]: any }) => {
    const { x, y, width, height } = cooridates;
    // 偏差
    const deviation = 3;
    const endX = x + width;
    const endY = y + height + deviation;

    return {
        points: [x, endY, endX, endY],
        stroke: "#71F0FF",
        strokeWidth: 3,
    };
};
</script>
<style lang="scss" scoped></style>
